<!--顶部搜索框 -->
<template>
  <el-menu
    :default-active="activeIndex2"
    class="el-menu-demo"
    mode="horizontal"
    :interval="4000"
    @select="handleSelect"
    background-color="#fff"
    text-color="#000"
    active-text-color="#1d953f"
  >
    <!-- 主页 -->
    <el-menu-item index="1">
      <router-link to="/">
        <img class="imgdemo" src="../assets/music.png" />
        <span>MUSIC</span>
      </router-link>
    </el-menu-item>
    <!-- 首页 -->
    <el-menu-item index="2">
      <router-link to="/">
        <span>首页</span>
      </router-link>
    </el-menu-item>
    <!-- 歌单 -->
    <el-menu-item index="3">
      <router-link to="/songlist">
        <span>歌单</span>
      </router-link>
    </el-menu-item>
    <!-- 歌手 -->
    <el-menu-item index="4">
      <router-link to="/singer">
        <span>歌手</span>
      </router-link>
    </el-menu-item>
    <!-- 我的音乐 -->
    <el-menu-item index="5">
      <router-link to="/mymusic">
        <span>我的音乐</span>
      </router-link>
    </el-menu-item>
    <div class="serachDemo">
      <div class="inputDemo">
        <input
          type="text"
          placeholder="搜索音乐"
          @keyup.enter="goSearch()"
          v-model="keywords"
        />
      </div>
      <button class="btnDemo" @click="goSearch()">搜索</button>
    </div>
  </el-menu>
</template>

<script>
// import axios from "axios";
export default {
  name: "Topserch",
  data() {
    return {
      activeIndex: "1",
      activeIndex2: "1",
      keywords: "",
    };
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    goSearch() {
      if (this.keywords.length == 0) {
        this.$message({
          message: "请输入内容",
          type: "warning",
        });
      } else {
        this.$router
          .push({
            name: "search",
            query: {
              kw: this.keywords,
            },
          })
          .catch((err) => {
            console.log("err", err);
          });
        this.keywords = "";
      }
    },
  },
};
</script>

<style scope>
.imgdemo {
  height: 57px;
}
a {
  text-decoration: none;
}
.serachDemo {
  margin-top: 5px;
  margin-left: 40px;
  margin-right: 0px;
  margin-bottom: 0px;
  height: 50px;
  width: 380px;
  float: left;
  padding: 0;
}
.inputDemo {
  display: inline-block;
}
.btnDemo {
  height: 47px;
  width: 55px;
  font-family: "Microsoft soft";
  border: 1px solid #ccc;
  border-left: none;

  border-top-right-radius: 2em;
  border-bottom-right-radius: 2em;
}
input {
  background-color: #f8f9fa;
  outline-style: none;
  border: 1px solid #ccc;
  border-right: none;
  padding: 13px 14px;
  width: 270px;
  font-size: 14px;
  font-weight: 700;
  font-family: "Microsoft soft";

  border-top-left-radius: 2em;
  border-bottom-left-radius: 2em;
}
input:focus {
  border-color: #1d953f;
  border: 1px solid #1d953f;
  outline: 0;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),
    0 0 8px rgba(102, 175, 233, 0.6);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),
    0 0 8px rgba(102, 175, 233, 0.6);
}
button:hover {
  color: #1d953f;
  border: 1px solid #1d953f;
  outline: 0;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),
    0 0 8px rgba(102, 175, 233, 0.6);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),
    0 0 8px rgba(102, 175, 233, 0.6);
}
</style>